<template>
	<view class="content">
		<view class="set-item">
			<view class="set-item-label"><text>证书</text></view>
			<view class="set-item-value" @click="addCredentials">
				点击上传
				<icon class="iconfont icon">&#xe71e;</icon>
			</view>
		</view>
		<view class="set-item set-item-img">
			<view class="set-item-value item-img" v-for="(item, index) in data.credentialsData" :key="index">
				<lazy-load-image class="credentials-img" :image="item" :errorImg="config.errorImage.img" imgMode="aspectFill" height="134rpx" />
				<view class="delete" @click="deleteCredentials(index)"><icon class="iconfont icon">&#xe7b7;</icon></view>
			</view>
		</view>
	</view>
	<view v-show="data.trialcredentials === '2'" class="tips">审核失败！此时您的证书不对外展示</view>
	<view>
		<button v-if="data.trialcredentials === '0'" class="btn btn-sub btn-dis" disabled hover-class="btnClickStyle" @click="pushCredentials">审核中</button>
		<button
			v-if="data.trialcredentials !== '0'"
			:disabled="isDisabled"
			:class="isDisabled ? 'btn-dis' : ''"
			class="btn btn-sub"
			hover-class="btnClickStyle"
			@click="pushCredentials"
		>
			提交
		</button>
	</view>
</template>

<script setup>
import { reactive, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { showModal } from '@/common/hooks/useShow.js';
import { uploadImg } from '@/subpages/common/api/upload.js';
import { getCredentials, editCredentials } from '@/subpages/common/api/set.js';
import config from '@/uni.config.js';
const data = reactive({
	credentialsData: [],
	credentialsOldData: [],
	nStr: '',
	oStr: '',
	trialcredentials: null
});
onLoad(options => {
	data.trialcredentials = options.trialcredentials;
	getCredentialsRequest();
});
const isDisabled = computed(() => {
	return !data.credentialsData.length || data.nStr == data.oStr;
});
//初始化获取证书
async function getCredentialsRequest() {
	const res = await getCredentials();
	data.credentialsData = res.data.credentials;
	data.credentialsOldData = res.data.credentials;
	data.nStr = res.data.credentials.join(',');
	data.oStr = res.data.credentials.join(',');
}
//添加证书
function addCredentials() {
	if (data.trialcredentials === '0') {
		uni.showToast({
			icon: 'none',
			title: '审核中无法上传证书'
		});
		return;
	}
	if (data.credentialsData.length === 3) {
		uni.showToast({
			icon: 'none',
			title: '最多上传三张证书'
		});
		return;
	}
	uni.chooseImage({
		count: 3,
		// crop: {
		// 	width: 600,
		// 	height: 600
		// },
		success(res) {
			if (data.credentialsData.length + res.tempFiles.length > 3) {
				showModal({
					content: '超出图片选择数量，请重新选择图片',
					showCancel: false
				});
				return;
			}
			for (let i in res.tempFiles) {
				let size = +res.tempFiles[0].size / 1024 / 1024;
				if (size > config.file.uploadSize) {
					showModal({
						content: `建议上传小于${config.file.uploadSize}M尺寸为100*100的图片`,
						showCancel: false
					});
					return;
				}
			}
			let newData = res.tempFiles.map(item => {
				let obj = {
					type: 'certificate',
					fileUrl: item.path
				};
				return obj;
			});
			uploadImg(newData)
				.then(uploadRes => {
					let imgArr = uploadRes.map(item => {
						return item.src;
					});
					data.credentialsData = [...data.credentialsData, ...imgArr];
					data.nStr = data.credentialsData.join(',');
				})
				.catch(error => {
					console.log(error, 'error');
				});
		}
	});
}
//删除证书
function deleteCredentials(index) {
	data.credentialsData.splice(index, 1);
	data.nStr = data.credentialsData.join(',');
}
//提交证书请求
async function pushCredentials() {
	let dataStr = data.credentialsData.join(',');
	const res = await editCredentials({ credentials: dataStr });
	setTimeout(() => {
		uni.navigateBack();
	}, 500);
}
</script>

<style lang="scss">
@import '@/common/css/base.scss';
page {
	background-color: $bgColor;
}
</style>
<style lang="scss" scoped>
@import '@/subpages/common/css/set.scss';
.content {
	margin: 28rpx;
	border-radius: 16rpx;
	overflow: hidden;
	background-color: #fff;
	.set-item-value {
		color: #666;
	}
	.set-item-img {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: stretch;
		align-content: stretch;
		.set-item-value {
			position: relative;
			margin-right: 18rpx;
			width: 194rpx;
			height: 134rpx;
			color: #666;
			border-radius: 16rpx;
			.credentials-img {
				display: block;
				width: 100%;
				height: 100%;
			}
			.delete {
				position: absolute;
				bottom: 0;
				padding: 10rpx 0;
				width: 100%;
				background: rgba(0, 0, 0, 0.5);
				.icon {
					margin: 0;
					justify-content: center;
					color: #fff;
				}
			}
		}
	}
}
.tips {
	padding: 28rpx;
	font-size: 24rpx;
	color: #ff0000;
}
.btn-sub {
	margin-top: 44rpx;
	width: 695rpx;
	height: 80rpx;
	line-height: 80rpx;
	color: #fff;
	background: #e1835b;
	border-radius: 16rpx;
}
.btn-dis {
	background-color: #bbb !important;
	color: #fff !important;
}
</style>
